require('./PageSanitarydetail.styl');
import { Boxs, NavBar, Toast, Context } from 'saltui';
import { Control } from 'react-keeper';
const classNames = require("classnames")
const { HBox, Box, VBox } = Boxs;
const Girdview = require('components/girdview');
const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');

class Sanitarydetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            urlList: [],//图片列表
            remark: '',//备注
            itemList: [],//打分列表
            placeName: '',
            className: '',
            itemList: [],
            score: '',
            scoreId: ''
        };
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
    }
    handleOnLeftClick() {
        Control.go(-1);
    }
    render() {
        let t = this;
        return (
            <div className="sanitarydetail">
                <NavBar
                    className={classNames("my-navbar", { "ios-nav-bar": window.isIphone })}
                    isShow={false}
                    title="详情"
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={Context.noop}
                    rightText=''
                />
                <div className="sanitarydetail-content">
                    <HBox className="t-LH40 sanitarydetail-content-box t-PL10 t-PR10">
                        <Box flex={1}>区域名称</Box>
                        <Box flex={1} className="t-FAR">{this.state.placeName}</Box>
                    </HBox>
                    <HBox className="t-LH40 sanitarydetail-content-box t-PL10 t-PR10">
                        <Box flex={1}>负责单位</Box>
                        <Box flex={1} className="t-FAR">{this.state.className}</Box>
                    </HBox>
                    <HBox className="t-LH40 sanitarydetail-content-box t-PL10 t-PR10">
                        <Box flex={1} className="score">总分数</Box>
                        <Box flex={1} className="t-FAR">{this.state.score}</Box>
                    </HBox>
                    <div className="t-MT10">
                        {this.state.itemList.map((item, index) => {
                            return (<HBox  className="sanitarydetail-content-listitem t-LH40 t-PL10 t-PR10" vAlign="center" >
                                <Box flex={1}>{item.itemName}&nbsp;&nbsp;{`(${item.fullMark})`}</Box>
                                <Box flex={1} className={classNames("t-FAR","item-color")}>{item.itemScore}</Box>
                            </HBox>)
                        })}
                    </div>
                    {this.state.urlList.length > 0 && <Girdview girdItems={this.state.urlList} />}
                    {this.state.remark && <div className="remark"><span className="t-MR6">备注:</span>{this.state.remark}</div>}
                </div>
            </div>
        );
    }

    componentWillMount() {
    }

    componentDidMount() {
        Actions.fetch({ ...Control.state })
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Sanitarydetail, Reflux.connect(Store));

module.exports = Sanitarydetail;
